<template>
  <div class="chart-content-wrapper">
    <top-filter :title="everyMedicalTypeFilter.title">
      <single-list-filter-without-cb :defaultText="'统筹区'" :filter="filter" :type="'planArea'"
                                     @confirmSingleSelect="confirmSingleSelect">
      </single-list-filter-without-cb>
      <group-list-filter :defaultText="'医院等级'" :filter="filter" :type="'hospital'"
                         @confirmDoubleSelect="confirmDoubleSelect">
      </group-list-filter>
    </top-filter>
    <div id="inHosNumAnalyseChartsId" style="height:68%;"></div>
    <summarize :showSummarizeText="conclusion"></summarize>
  </div>
</template>

<script type="text/ecmascript-6">
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import GroupListFilter from '../filter/group-list-filter.vue'
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import {getYearAverageInHosDaysData} from '../../../api/last-api'
  import {brokenLineChartOption} from '../../common/mixin'
  export default {
    props: ['isChange'],
    watch: {
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    created() {
    },
    components: {
      SingleListFilterWithoutCb,
      GroupListFilter,
      TopFilter,
      Summarize
    },
    data () {
      return {
        filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
        itemStyle: {
          height: '300px'
        },
        everyMedicalTypeFilter: {
          title: '2013年-2018年平均住院日综合分析'
        },
        conclusion: '',
        chartOptions: brokenLineChartOption
      }
    },
    mounted(){
//      this.getYearAverageInHosDaysData()
      this.setDataIntoCharts(require('./test/avgInHosDay.json').data)
    },
    methods: {
      drawYearAverageInHosDaysCharts(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('inHosNumAnalyseChartsId'), null, {renderer: 'canvas'})
        // 绘制图表
        this.myChart.setOption(this.chartOptions);
      },
      confirmSingleSelect(filter) {
        console.log(JSON.stringify(filter))
      },
      confirmDoubleSelect(filter){
        console.log(JSON.stringify(filter))
      },
      getYearAverageInHosDaysData() {
        // 获取平均住院日综合分析数据
        getYearAverageInHosDaysData('222', '1').then(response => {
          if (response.code == 0) {
            this.setDataIntoCharts(response.data)
          }
        }).catch(err => {
        })
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.everyMedicalTypeFilter.title = response.reportName
        // 设置结论
        this.conclusion = response.conclusion
        // 清空底部标识的data数据
        this.chartOptions.legend.data = []
        // 清空X轴线上面的年份数据，取第一条数据的年份
        this.chartOptions.xAxis[0].data = []
        // 清空Y轴线上面的对应金额数据
        this.chartOptions.series = []
        response.arrayVo.forEach((item, index) => {
          if (index == 0) {
            this.chartOptions.xAxis[0].data = item.year
          }
          this.chartOptions.legend.data.push(item.hospitalName)
          this.chartOptions.series.push({
            name: item.hospitalName,
            type: 'line',
            data: item.avgDay,
            symbolSize: 10,
            symbol: 'circle',
            showSymbol: true,
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 20
              }
            },
            markPoint: {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
            },
            markLine: {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
            }
          })
        })
        this.drawYearAverageInHosDaysCharts()
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/last-charts.css";
</style>
